@use '@angular/material/core/tokens/token-utils';
@use '@angular/material/core/style/sass-utils';

// The prefix used to generate the fully qualified name for tokens in this file.
$prefix: (ngm, model);

@function get-unthemable-tokens() {
  @return (
    container-rounded: var(--ngm-primary-container-rounded)
  );
}

@function get-color-tokens() {
  @return (
    toolbar-background-color: var(--ngm-color-surface-container),
    color-surface: var(--ngm-color-surface),
    border-color: var(--ngm-color-border),
  );
}

@function get-token-slots() {
  @return sass-utils.deep-merge-all(
    get-unthemable-tokens(),
    get-color-tokens(),
  );
}

:host {
  @include token-utils.create-token-values($prefix, get-token-slots());
  --mdc-list-list-item-container-shape: #{theme('borderRadius.lg')};
  --mat-toolbar-standard-height: 30px;
  --ngm-model-toolbar-background-color: linear-gradient(0.25turn, var(--mat-sidenav-content-background-color), var(--ngm-model-color-surface));

  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  max-width: 100%;
  height: 100%;

  &.pac-fullscreen {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 100;
  }
}

@include token-utils.use-tokens($prefix, get-token-slots()) {
  .mat-drawer-container {
    border-top-left-radius: var(#{token-utils.get-token-variable(container-rounded)});
  }
  .mat-drawer.mat-drawer-over {
    --mat-sidenav-container-background-color: var(#{token-utils.get-token-variable(color-surface)});
  }
  .mat-drawer-content {
    background-color: var(#{token-utils.get-token-variable(color-surface)});
    border-top-left-radius: var(#{token-utils.get-token-variable(container-rounded)});
    @apply flex overflow-hidden;
  }
  .pac-model__shell-bar {
    --mat-icon-color: theme('colors.gray.500');
    --mat-toolbar-container-background-color: var(#{token-utils.get-token-variable(toolbar-background-color)});
  }
  .pac-model-content {
    --mat-sidenav-content-background-color: var(#{token-utils.get-token-variable(color-surface)});
  }
}

:host ::ng-deep {
  .pac-model__shell-bar {
    --mat-icon-color: theme('colors.gray.500');
  }

  .mat-drawer-container {
    --mat-toolbar-container-background-color: transparent;
  }

  .mat-drawer-container ngm-splitter {
    --ngm-splitter-background-color: transparent;
  }

  // Toolbar styles
  .mat-toolbar.pac-sub-toolbar {
    &.ngm-density__compact.mat-toolbar-row,
    &.ngm-density__compact.mat-toolbar-single-row {
      height: 33px;
      padding: 0 6px;
      font-size: 1rem;
    }
  }

  .pac-model__settings-container {
    height: 100%;
    margin: 0;
  }
}

.pac-fullscreen {
  z-index: 3;
}

.mat-drawer.ngm-story__designer-drawer {
  width: 200px;
}

.pac-model__nav-list {
  max-height: 100%;
  overflow-y: auto;
  height: 100%;

  .pac-model__nav-item:not(.selected) {
    .pac-model__nav-action:not(.active) {
      @apply hidden;
    }

    &:hover {
      .pac-model__nav-action {
        @apply flex;
      }
    }
  }
}

.ngm-action-strip  {
  position: absolute;
  right: 0;
  border-radius: 15px;
}

.pac-model__search {
  display: flex;
  flex: 1;
  font-size: 12px;
  line-height: 12px;
  margin: 5px 0;

  .mat-mdc-input-element {
    @apply flex-1 outline-none bg-transparent border-none;
  }
}

list-content-loader {
  padding: 1rem;
}

.cdk-menu-bar {
  .cdk-menu-item {
    @apply pl-4 outline-none rounded-md;
  }
}

.pac-model__copilot-trigger.mdc-icon-button.active {
  @apply bg-slate-400/50;
}

.ngm-copilot-chat {
  @apply w-full h-full rounded-lg shadow-lg overflow-hidden;
}

.mat-drawer-content {
  @apply flex overflow-hidden;
}

.cdk-virtual-scrollable {
  @apply overflow-hidden hover:overflow-auto;
}